﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Beetlex-io.com</title>
    <link href="/css/beetlex-v1.css" rel="stylesheet" />
    <script src="/js/beetlex-v1.js"></script>
    <meta name="viewport" content="user-scalable=no">
</head>
<body>
    <div id="app">

        <div :class="[menuSize=='min'?'menu_full':'menu_min']">
            <div class="menu-panel">
                <div v-if="menuSize=='min'" class="menu-panel-header">
                    <div class="web-logo">
                        <img :src="logoImg" />
                        
                    </div>
                    <div class="web-title">{{title}}</div>
                    <div class="menu-resize-btn">
                        <a title="最小化菜单" size="mini" @click="menuSize='max'">
                            <i class="el-icon-s-fold"></i>
                        </a>
                    </div>
                </div>
                <div v-else class="menu-resize-min-btn">
                    <a title="最大化菜单" size="mini" @click="menuSize='min'">
                        <i class="el-icon-s-unfold"></i>
                    </a>
                </div>
                <webfamily-menu ref="pageMenu" :menutype="'vertical'" :size="menuSize" @resize="menuSize=$event" :token="menus">

                </webfamily-menu>

            </div>

        </div>


        <div v-if="headerModel" :class="menuSize=='min'?'header_min':'header_max'">
            <keep-alive>
                <component :is="headerModel"></component>
            </keep-alive>
        </div>

        <div :class="menuSize=='min'?'context_min':'context_max'">
            <keep-alive>
                <el-tabs @tab-click="onTabclick" v-if="tabsEnabled" type="border-card" v-model="activeName" style="position:absolute;top:0px;left:0px;right:10px;bottom:10px;" class="win-tabs" :closable="true" @tab-remove="OnCloseWindows">
                    <el-tab-pane v-for="item in windows" :name="item.id" v-bind:key="item.id">
                        <span slot="label"><i v-if="item.icon" :class="item.icon"></i> {{item.title}}</span>
                        <component :is="item.model" :token="item.data" :winid="item.id"></component>
                    </el-tab-pane>
                </el-tabs>
                <component v-else :is="activeModel.model" :token="activeModel.data" :winid="activeModel.id"></component>
            </keep-alive>
        </div>
        <el-dialog :visible.sync="loginDialogVisible" class="login-modal" @opened="onLoginOpened" :close-on-click-modal="false" :fullscreen="true" :show-close="false"
                   width="500px"
                   center>
            <component ref="loginDialog" :is="loginModel"></component>
        </el-dialog>
        <component v-if="footerModel" :is="footerModel"></component>

        <component v-if="leftModel" :is="leftModel"></component>

        <component v-if="rightModel" :is="rightModel"></component>
    </div>
    <script src="/beetlex/js/webfamily.js"></script>
</body>
</html>